<template>
  <!-- 筛选弹窗 -->
  <uni-popup
    ref="popupRef"
    type="bottom"
    background-color="#fff"
    @change="change"
  >
    <view class="filter-modal-container">
      <!-- 顶部标题栏 -->
      <view class="modal-header">
        <text class="title">筛选</text>
        <uni-icons
          type="closeempty"
          size="20"
          color="#666"
          @click="closeModal"
        ></uni-icons>
      </view>

      <!-- 筛选内容区域 -->
      <view class="filter-content">
        <!-- 订单类型 -->
        <view class="filter-section">
          <text class="section-title">订单类型</text>
          <view class="tag-group">
            <view
              v-for="type in orderTypes"
              :key="type.value"
              class="tag-item"
              :class="{ active: selectedOrderType === type.value }"
              @click="selectOrderType(type.value)"
            >
              {{ type.label }}
            </view>
          </view>
        </view>

        <!-- 订单状态 -->
        <view class="filter-section">
          <text class="section-title">订单状态</text>
          <view class="tag-group">
            <view
              v-for="status in orderStatuses"
              :key="status.value"
              class="tag-item"
              :class="{ active: selectedOrderStatus === status.value }"
              @click="selectOrderStatus(status.value)"
            >
              {{ status.label }}
            </view>
          </view>
        </view>

        <!-- 订单编号 -->
        <view class="filter-section">
          <text class="section-title">订单编号</text>
          <input
            class="input-field"
            v-model="orderNo"
            placeholder="请输入订单编号"
            placeholder-class="input-placeholder"
          />
        </view>

        <!-- 买家手机号 -->
        <view class="filter-section">
          <text class="section-title">买家手机号</text>
          <input
            class="input-field"
            v-model="buyerPhone"
            type="number"
            placeholder="请输入买家手机号"
            placeholder-class="input-placeholder"
          />
        </view>
      </view>

      <!-- 底部按钮 -->
      <view class="modal-footer">
        <view class="btn btn-reset" @click="handleReset">重置</view>
        <view class="btn btn-confirm" @click="handleConfirm">确定</view>
      </view>
    </view>
  </uni-popup>
</template>

<script setup>
import { ref } from "vue";

// 弹窗引用
const popupRef = ref(null);

// 订单类型选项
const orderTypes = ref([
  { label: "全部", value: "all" },
  { label: "扫码订单", value: "scan" },
  { label: "POS订单", value: "pos" },
  { label: "线下汇款", value: "offline" },
  { label: "收款订单", value: "payment" },
  { label: "购房购车", value: "house_car" },
  { label: "合作订单", value: "cooperation" },
  { label: "等导订单", value: "guide" },
  { label: "商户订单", value: "merchant" },
  { label: "酒道馆订单", value: "wine" },
]);

// 订单状态选项
const orderStatuses = ref([
  { label: "全部", value: "all" },
  { label: "已退款", value: "refunded" },
]);

// 筛选条件
const selectedOrderType = ref("all");
const selectedOrderStatus = ref("all");
const orderNo = ref("");
const buyerPhone = ref("");

// 选择订单类型
const selectOrderType = (value) => {
  selectedOrderType.value = value;
};

// 选择订单状态
const selectOrderStatus = (value) => {
  selectedOrderStatus.value = value;
};

// 打开弹窗
const open = () => {
  popupRef.value.open("bottom");
};

// 关闭弹窗
const closeModal = () => {
  popupRef.value.close();
};

// 重置筛选条件
const handleReset = () => {
  selectedOrderType.value = "all";
  selectedOrderStatus.value = "all";
  orderNo.value = "";
  buyerPhone.value = "";
};

// 确认筛选
const handleConfirm = () => {
  const filterData = {
    orderType: selectedOrderType.value,
    orderStatus: selectedOrderStatus.value,
    orderNo: orderNo.value,
    buyerPhone: buyerPhone.value,
  };

  emit("confirm", filterData);
  closeModal();
};

// 弹窗状态变更
const change = (e) => {
  console.log("filter popup change:", e);
};

// 定义事件
const emit = defineEmits(["confirm"]);

// 暴露方法给父组件调用
defineExpose({
  open,
  close: closeModal,
});
</script>

<style scoped lang="scss">
.filter-modal-container {
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;
  overflow: hidden;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  padding-bottom: 100rpx;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10rpx 40rpx;
  border-bottom: 2rpx solid #f0f0f0;
}

.title {
  font-size: 36rpx;
  font-weight: 500;
  color: #333;
}

.filter-content {
  flex: 1;
  overflow-y: auto;
  padding: 40rpx 40rpx 20rpx;
}

.filter-section {
  margin-bottom: 40rpx;

  &:last-child {
    margin-bottom: 0;
  }
}

.section-title {
  display: block;
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 20rpx;
}

.tag-group {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20rpx;
}

.tag-item {
  padding: 12rpx 0;
  background-color: #f5f5f5;
  border-radius: 8rpx;
  font-size: 28rpx;
  color: #666;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2rpx solid transparent;

  &.active {
    background-color: #fff7e6;
    color: #ffb200;
    border-color: #ffb200;
  }
}

.input-field {
  width: 100%;
  height: 80rpx;
  padding: 0 30rpx;
  background-color: #f5f5f5;
  border-radius: 8rpx;
  font-size: 28rpx;
  color: #333;
  border: 2rpx solid transparent;
  transition: all 0.3s ease;

  &:focus {
    background-color: #fff;
    border-color: #ffb200;
  }
}

.input-placeholder {
  color: #999;
}

.modal-footer {
  display: flex;
  justify-content: space-between;
  gap: 20rpx;
  padding: 20rpx 40rpx;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  border-top: 2rpx solid #f0f0f0;
  background-color: #fff;
}

.btn {
  flex: 1;
  text-align: center;
  border-radius: 50rpx;
  padding: 20rpx 0;
  font-size: 32rpx;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-reset {
  color: #8e8e8e;
  border: 2rpx solid #8e8e8e;
  background-color: #fff;

  &:active {
    opacity: 0.7;
  }
}

.btn-confirm {
  color: #fff;
  background-color: #ffb200;
  border: 2rpx solid #ffb200;

  &:active {
    background-color: #e6a000;
  }
}
</style>

